import "./index.css"
import {useState,useEffect} from "react"
import {Modal, Form, Input, message } from 'antd';
import Uploader from "./Upload"
import * as api from "@/api/product";

const Dialog = (props:any) => {
    let {open,getCategory,dialogDataShow:{categoryName,categoryImgurl},setDialogDataShow,category_id,isAddCategory,setIsAddCategory} = props
    let [uploadCategoryImgurl,setUploadCategoryImgurl] = useState('')

    // useCallback(() => {})

    const onFinish = (values: any) => {
        console.log('DialogSuccess:', values);
            // if(!uploadCategoryImgurl){
            // message.error('请上传类目图片')
            // } else {
                console.log('isAddCategory1',isAddCategory)
                if(isAddCategory){
                    setIsAddCategory(false);
                    api.addCategory(values.categoryName,uploadCategoryImgurl).then(res=>{
                        if(res.data.state){
                            message.success('添加成功')
                            getCategory()
                        }
                    });
                }

                if ( categoryName !== values.categoryName) {
                    console.log(values.categoryName,category_id);
                    
                    api.updateCategory(values.categoryName,category_id).then(res=>{
                        message.success(res.data.msg)
                        if(res.data.state){
                            getCategory()
                            setDialogDataShow({categoryName:''})
                        }
                    })
                }

            // }
      };
    
      const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
      };

      const [form] = Form.useForm()

      
      useEffect(() =>{
        // if(open) form.setFieldsValue({categoryName:'123345',categoryName2:'5677890'})
        if(open) {
            form.setFieldsValue({categoryName})            
        }
      },[open])

      const getUploadImhUrl = (uploadCategoryImgurl:string) =>{
        console.log('Dialogurl',uploadCategoryImgurl);
        setUploadCategoryImgurl(uploadCategoryImgurl)
      }

    return (
     <Modal 
        open={open}
        cancelText="取消" 
        okText="确定" 
        onOk={()=>{props.onOk(form)}} 
        onCancel={()=>{props.onCancel()}}
        forceRender
        >

        <Form
        form={form}
        name="basic"
        labelCol={{ span: 7 }}
        wrapperCol={{ span: 13 }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        >

            <Form.Item
                label="类目名称"
                name={'categoryName'}
                rules={[{ required: true, message: '类目的名称' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item label="类目图片" name="categoryImgurl">
                <Uploader getUploadImhUrl={getUploadImhUrl} categoryImgurl={categoryImgurl}/>
            </Form.Item>
        </Form>
    </Modal>)
}

export default Dialog